<template>
  <svg class="circle-point-main" :width="state.option.width" :height="state.option.height">
    <defs>
      <filter id="blurFilter" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
      </filter>
    </defs>
    <circle :cx="state.option.width / 2 " :cy="state.option.height / 2" :r="state.option.inCircle" :fill="state.option.inCircleColor" filter="url(#blurFilter)"/>
    <!-- 外部圆环 -->
    <circle :cx="state.option.width / 2 " :cy="state.option.height / 2" :r="state.option.outCircle" fill="none" :stroke="state.option.outCircleColor"  :stroke-width="state.option.outCircleWidth"/>
  </svg>
</template>

<script setup lang="ts">
import {computed, onMounted, PropType, reactive, toRefs, watch} from 'vue'
import {copyDefinedProperties} from "../../../utils/copy.ts";
defineOptions({
  name: 'Broder1',
})
const props = defineProps(['option']);
const state = reactive({
  option:{
    height:10,
    width:20,
    left:10,
    top:10,
    outCircle: 15,
    inCircle: 5,
    outCircleColor: '#3f5261',
    inCircleColor: '#fff',
    outCircleWidth: 2
  },
  window:{
    height:1700,
    width:800,
  },
})
onMounted(()=>{
  setting()
})
function setting(){
  if(props.option!==undefined){
    // console.log(props.option)
    copyDefinedProperties(props.option,state.option)
  }
  getWH()
}
const left=computed(()=>`${(state.option.left/100)*state.window.width}px`)
const top=computed(()=>`${(state.option.top/100)*state.window.height}px`)
watch(()=>props.option,(newValue,oldValue)=>{
  // console.log('workOrder变化了',newValue,oldValue)
  setting()
},{immediate:true,deep:true})
window.addEventListener('resize',()=>{
  getWH()
})
function getWH(){
  state.window={
    width: document.body.clientWidth,
    height: document.body.clientHeight
  }
  state.option.height=(props.option.height/100)*state.window.height
  state.option.width=(props.option.width/100)*state.window.width
  console.log(state.option.height)
}
</script>
<style scoped>
.circle-point-main{
  position: absolute;
  left:v-bind(left);
  top:v-bind(top);
}
</style>
